<template>
    <div>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group
                ref="elCheckBoxGroup"
                v-bind="originProp"
                :value="value"
                @change="handleCheckedChange"
                v-on:focus="($event)=>{$emit('focus', $event)}"
                v-on:blur="($event)=>{$emit('blur', $event)}"
                v-on:change="(val)=>{$emit('change', val)}"
                v-on:input="(val)=>{$emit('input', val)}"
        >
                <el-checkbox
                        v-for="item in localData"
                        :disabled="!!item.disabled"
                        :label="$stObjectTools.getValue(item,optionProp.value)"
                        :key="$stObjectTools.getValue(item,optionProp.value)"
                >{{$stObjectTools.getValue(item,optionProp.label)}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script>
    export default {
        name: 'StElCheckBoxGroup',
        props: {
            value: {
            },
            // 被包装组件的原始属性
            originProp: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            // 自定义数据
            datas: {
                type: [Array, String],
                default: function () {
                    return []
                }
            },
            // 选项配置
            optionProp: {
                type: Object,
                default: function () {
                    return {
                        value: 'id', // 选中的值属性
                        label: 'name' // 显示的值属性
                    }
                }
            },
        },
        data() {
            return {
                localData: [],
                checkAll: false,
                isIndeterminate: false
            }
        },
        mounted() {
            this.initData(this.datas)
            this.handleCheckedChange(this.value)

        },
        methods: {
            selectedDataEmit(val){
                this.$emit('data', this.getSelectData(val))
            },
            // 获取选中的数据本身
            getSelectData(val) {
                if (val == null || val == undefined || val == '') {
                    return null
                }
                return this.localData.filter(item => val.some(valItem => valItem == this.$stObjectTools.getValue(item, this.optionProp.value)))
            },
            // 根据url加载数据
            initDataByUrl(url) {
                this.axios.get(url).then(res => {
                    this.localData = res.data
                }).catch(error => {
                    this.localData = []
                    if (error.response) {
                        if (error.response.status == 401) {
                            return
                        }
                        if(error.response.data && error.response.data.errorMsg){
                            if (error.response.status != 404) {
                                this.$message.error(error.response.data.errorMsg)
                            }
                        }

                    } else {
                        this.$message.error('网络错误或服务不可用')
                    }
                })
            },
            // 加载
            initData(data) {
                if (!data) {
                    return
                }
                if (this.$stArrayTools.isArray(data)) {
                    this.localData = data
                } else if (this.$stStringTools.isString(data)) {
                    this.initDataByUrl(data)
                } else if (this.$stFunctionTools.isFunction(data)) {
                    this.initData(data())
                }
            },
            handleCheckAllChange(val) {
                this.isIndeterminate = false
                let value = val ? this.localData.map(item =>this.$stObjectTools.getValue(item, this.optionProp.value)) : []
                this.$emit('input', value)
            },
            handleCheckedChange(value) {
              console.log(value)
                let checkedCount = value.length
                this.checkAll = checkedCount === this.localData.length
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.localData.length
            }
        },
        watch: {
            datas(val) {
                this.initData(val)
            },
            value: {
                handler(val){
                    this.selectedDataEmit(val)
                    this.handleCheckedChange(val)
                },
                deep: true
            },
            localData() {
                this.selectedDataEmit(this.value)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
